<template>
  <div class="back-wrap">
    <div class="details">
      <div class="top">
        <van-icon name="arrow-left" @click="toRouter" class="leftReturn" /><span
          @click="toRouter"
          >订单详情</span
        >
      </div>
      <div class="status-cotnent">
        <div class="status">{{ item.status | formatStatus }}</div>
        <div class="time">付款时间：{{ item.payTime | formatDate }}</div>
        <div class="contacts">
          {{ item.userName }}<span class="phone">{{ item.mobile }}</span>
        </div>
        <div class="Buyers" @click="tel(item.mobile)">
          <van-icon name="phone-o" />联系卖家
        </div>
      </div>
      <div class="address-info">
        <van-icon name="location-o" />
        <div class="info-content">
          <div class="contacts">
            {{ item.userName }}<span class="phone">{{ item.mobile }}</span>
          </div>
          <div class="address">
            {{ item.province }}{{ item.city }} {{ item.district
            }}{{ item.address }}
          </div>
        </div>
      </div>
      <div class="goods-content">
        <goods-content :item="item" goodsClass="goods-bottom"></goods-content>
        <div class="cell">
          <div class="label">商品价格</div>
          <div class="freight">
            <div class="price small">
              {{ item.amount | formatFront
              }}<span class="decimal">{{ item.amount | formatAfter }}</span>
              <span class="company">元宝</span>
            </div>
          </div>
        </div>
        <div class="cell">
          <div class="label">运费</div>
          <div class="freight">
            <template v-if="item.freight == '0'">包邮</template>
            <template v-else>{{ item.freight }}</template>
          </div>
        </div>
        <div class="cell">
          <div class="label">手续费</div>
          <div class="freight">
            {{ item.serviceCharge }}
          </div>
        </div>
        <div class="cell" style="margin-top: 7px">
          <div class="label paidIn">实付款</div>
          <div class="price">
            {{ item.total | formatFront
            }}<span class="decimal">{{ item.total | formatAfter }}</span>
            <span class="company">元宝</span>
          </div>
        </div>
      </div>
      <div class="consult-cotnent" v-if="Number(item.status) >= 6">
        <div class="desc">
          <div class="label">退款原因</div>
          <div class="cotnent" v-if="item.desc">
            {{ JSON.parse(item.desc).desc }}
          </div>
        </div>
        <div class="imgList" v-if="item.desc">
          <van-image
            fit="cover"
            v-for="(item, index) in JSON.parse(item.desc).imgList"
            :src="item"
            :key="index"
          />
        </div>
      </div>
      <div class="shadow">
        <div class="order">
          订单编号：{{ item.orderNo }}
          <span
            class="orderNo"
            :data-clipboard-text="item.orderNo"
            @click="copy('.orderNo')"
            v-if="item.orderNo"
            >复制</span
          >
        </div>
        <div class="paymentTime">付款时间：{{ item.payTime | formatDate }}</div>
        <div class="paymentTime tag-read">
          快递单号：{{ item.emsName }}
          <span
            class="emsName"
            :data-clipboard-text="item.emsName"
            @click="copy('.emsName')"
            v-if="item.emsName"
            >复制</span
          >
        </div>
        <div class="paymentTime">快递公司：{{ item.emsNo }}</div>
        <div class="paymentTime" v-if="item.status === '3'">
          申请时间：{{ item.refundTime | formatDate }}
        </div>
      </div>
    </div>
    <div
      class="footer"
      v-if="item.status === '2' || item.status === '0'"
    >
      <footer-button
        :item="item"
        @load="toRouter"
        @Pay="showPay"
        @open="open = false"
      ></footer-button>
      <password-input ref="password" @BuyData="addPayGoodsOrder"></password-input>
    </div>
  </div>
</template>
<script>
import { Popup, Icon, Image as VanImage, Toast, Lazyload } from "vant";
import { serveTel } from "@/utils/APPempower";
import { formatDate } from "@/assets/js/date";
import { getAddress } from "@/api/address";
import { payGoodsOrder } from "@/api/market";
import { statusList } from "./statusList";
import goodsContent from "./goods-content";
import footerButton from "./footer-button";
import Clipboard from "clipboard";
import md5 from "js-md5";
Vue.use(Lazyload, {
  lazyComponent: true,
});
export default {
  components: {
    [Popup.name]: Popup,
    [Icon.name]: Icon,
    [VanImage.name]: VanImage,
    [Toast.name]: Toast,
    goodsContent,
    footerButton,
    PasswordInput: (resolve) => require(["@/components/Password"], resolve),
  },
  data() {
    return {
      item: {},
      open: false,
    };
  },
  filters: {
    formatDate(date) {
      if (date) {
        var date = new Date(date);
        return formatDate(date, "yyyy-MM-dd hh:mm");
      }
    },
    formatFront(text) {
      if (text) {
        return text.substring(0, text.indexOf("."));
      }
    },
    formatAfter(text) {
      if (text) {
        return text.substr(text.lastIndexOf("."));
      }
    },
    formatStatus(statusId) {
      var status = statusList().find((item) => item.status === statusId);
      if (status) {
        return status.message;
      }
    },
  },
  created() {
    this.item = this.$route.query;
    getAddress({ addressId: this.item.addressId }).then((res) => {
      if (res.data.resultStatus) {
        this.item = {
          ...this.item,
          ...res.data.resultData[0],
        };
      }
    });
  },
  methods: {
    toRouter() {
      this.$onBackPressed();
    },
    showPay() {
      this.$refs.password.show();
    },
    addPayGoodsOrder(Password) {
      var data = {
        payPassword: md5(Password),
        orderNo: this.item.orderNo,
      };
      payGoodsOrder(data).then((res) => {
        if (res.data.resultStatus) {
          this.$refs.password.hide();
          this.toRouter(); 
          Toast.success(res.data.errorMessage);
        } else {
          this.$refs.password.fail(res.data.errorMessage);
        }
      });
    },
    copy(id) {
      const clipboard = new Clipboard(id);
      this.$nextTick(() => {
        clipboard.on("success", (e) => {
          Toast("复制成功");
          clipboard.destroy();
        });
        clipboard.on("error", (e) => {
          Toast("复制失败");
          clipboard.destroy();
        });
      });
    },
    tel(tel) {
      serveTel(tel);
    },
  },
};
</script>
<style lang="less" scoped>
.back-wrap {
  // position: relative;
  // overflow: hidden;
  &:after {
    position: absolute;
    left: -25%;
    right: 0;
    content: "";
    width: 150%;
    height: 216px;
    position: absolute;
    top: 0;
    border-radius: 0 0 100% 100%;
    background: #333333;
  }
  .details {
    position: relative;
    z-index: 1;
    padding: 36px 19px;
    .top {
      color: #ffffff;
      display: flex;
      align-items: center;
      height: 25px;
      font-size: 18px;
      font-weight: 500;
      color: #ffffff;
      line-height: 25px;
      .van-icon {
        margin-right: 2px;
        width: 25px;
        height: 25px;
        line-height: 25px;
        text-align: center;
      }
    }
    .status-cotnent {
      margin-top: 39px;
      position: relative;
      .status {
        height: 16px;
        font-size: 16px;
        font-weight: 500;
        color: #ffffff;
        line-height: 16px;
      }
      .contacts {
        margin-top: 6px;
        font-size: 11px;
        font-weight: 400;
        color: #ffffff;
        line-height: 16px;
      }
      .time {
        margin-top: 10px;
        height: 11px;
        font-size: 11px;
        font-weight: 400;
        color: #ffffff;
        line-height: 11px;
      }
      .Buyers {
        position: absolute;
        bottom: 0;
        right: 0;
        font-weight: 500;
        font-size: 11px;
        font-weight: 400;
        color: #ffffff;
        display: flex;
        align-items: center;
        .van-icon {
          width: 16px;
          height: 16px;
          font-size: 16px;
          line-height: 16px;
        }
      }
    }
    .address-info {
      margin-top: 13px;
      position: relative;
      height: 107px;
      padding: 0 18px;
      display: flex;
      align-items: center;
      background: #ffffff;
      box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06);
      .van-icon {
        flex: 22px 0 0;
        width: 22px;
        height: 22px;
        font-size: 22px;
        line-height: 22px;
        color: #f34a38;
        margin-right: 13px;
        text-align: center;
      }
      .info-content {
        .contacts {
          font-size: 14px;
          font-weight: 500;
          color: #333333;
          line-height: 20px;
        }
        .address {
          max-width: 209px;
          padding-top: 10px;
          font-size: 12px;
          font-weight: 400;
          color: #000000;
          line-height: 17px;
        }

        &:after {
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          height: 4px;
          background: repeating-linear-gradient(
            -45deg,
            #ff6c6c 0,
            #ff6c6c 20%,
            transparent 0,
            transparent 25%,
            #1989fa 0,
            #1989fa 45%,
            transparent 0,
            transparent 50%
          );
          background-size: 160px;
          background-size: 80px;
          content: "";
        }
      }
    }
    .goods-content {
      margin-top: 13px;
      padding: 0 10px;
      box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06);
      border-radius: 4px;
      .goods-bottom {
        margin-bottom: 25px;
      }
      .cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 11px;
        font-size: 11px;
        font-weight: 400;
        color: #333333;
        line-height: 11px;
        .paidIn {
          font-size: 14px;
        }
        .price {
          height: 18px;
          font-size: 18px;
          font-weight: bold;
          color: #f34a38;
          line-height: 18px;
          .decimal {
            height: 12px;
            font-size: 12px;
            line-height: 12px;
          }
          .company {
            margin-left: 2px;
            font-size: 12px;
            font-weight: 400;
            color: #333333;
            line-height: 12px;
          }
          .number {
            margin-left: 8px;
            height: 11px;
            font-size: 11px;
            font-weight: 400;
            color: #666666;
            line-height: 11px;
          }
          &.small {
            font-size: 14px;
            color: #333333;
          }
        }
      }
    }
    .consult-cotnent {
      margin-top: 13px;
      box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06);
      border-radius: 4px;
      padding: 18px 10px;
      .desc {
        display: flex;
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        line-height: 20px;
        .label {
          flex: 56px 0 0;
          margin-right: 20px;
          width: 56px;
        }
        .cotnent {
          flex: 1;
          color: #333333;
        }
      }
      .imgList {
        font-size: 0;
        .van-image {
          display: inline-block;
          margin: 7px 7px 0 0;
          width: 100px;
          height: 75px;
          overflow: hidden;
          border-radius: 4px;
          &:nth-child(3n + 3) {
            margin-right: 0;
          }
        }
      }
    }
    .shadow {
      margin-top: 13px;
      box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06);
      border-radius: 4px;
      padding: 10px;
      .order,
      .paymentTime {
        font-size: 11px;
        font-weight: 400;
        color: #333333;
        line-height: 11px;
        span {
          padding-right: 7px;
          float: right;
          color: #f34a38;
        }
      }
      .paymentTime {
        margin-top: 10px;
      }
    }
  }
}
.footer {
  padding: 7px 25px;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06);
  /deep/.button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 13px;
    width: 90px;
    height: 33px;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: #564946;
    border-radius: 17px;
    border: 1px solid #564946;
    &.orange {
      color: #f63c1c;
      border-color: #f63c1c;
    }
  }
}
</style>